
<template>
  <!-- 发布考核查看进展组件 -->
  <div>
    <div style="height: 700px; margin: 25px">
      <!-- 添加指标按钮 -->
      <el-row>
        <h2>{{ dataTypesTemp.templateName }}</h2>
      </el-row>
      <el-row>
        <el-form style="display:flex;margin-bottom:-10px" :model="ruleForm1" ref="ruleForm1">
          <el-form-item label="等级" label-width="-50px;">
            <el-select
              placeholder="请选择"
              v-model="ruleForm1.level"
              style="width:70%;line-height:5px"
              @change="changeOne"
              clearable
            >
              <el-option label="好" value="1"></el-option>
              <el-option label="较好" value="2"></el-option>
              <el-option label="一般" value="3"></el-option>
              <el-option label="差" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-popconfirm
            :title="'确定将考核等级为'+ '「'+level+'」'+'的结果推送至「考核数据总览」看板吗？'"
            @confirm="handleConfirm"
            @cancel="handleCancel"
          >
            <el-button
              :disabled="disableds"
              slot="reference"
              @click="tuiSong"
              style="color:#fff;background:#2b63b0"
            >推送至看板</el-button>
          </el-popconfirm>
        </el-form>
      </el-row>
      <!-- 表格信息 -->
      <el-row>
        <el-table
          :data="
          tableData"
          style="width: 100%; color: #333333; font-size: 14px"
          height="500"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
        >
          <el-table-column fixed type="index" align="center" label="编号" width="60"></el-table-column>
          <el-table-column prop="userName" align="center" label="被考核人姓名" width="160"></el-table-column>
          <el-table-column prop="departmentName" align="center" label="被考核人部门" width="160"></el-table-column>

          <el-table-column prop="grade" align="center" label="绩效等级" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.grade == 1">好</span>
              <span v-if="scope.row.grade == 2">较好</span>
              <span v-if="scope.row.grade == 3">一般</span>
              <span v-if="scope.row.grade == 4">差</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="员工周报">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="zhouBao(scope.row)"
                type="text"
                size="small"
                style="color:#3684e4;width:120px;text-decoration:underline;text-underline-offset:3px"
              >查看员工周报</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="assessState" label="评估流程">
            <template slot-scope="{row}">
              <span
                v-if="row.processBeans"
                style="color:#EF7045"
              >{{ "待"+row.processBeans.name+"评估" }}</span>
              <span v-else>{{ '评估结束' }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small"
                style="color: #4387c6;width:120px"
              >进入考评</el-button>-->
              <el-button
                :disabled="scope.row.grade==null"
                @click.native.prevent="editRow(scope.row)"
                type="text"
                size="small"
                style="color:#f34700;width:120px;text-decoration:underline;text-underline-offset:3px"
              >调整考核等级</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
      <!-- 返回按钮 -->
      <el-row>
        <el-button
          @click.prevent="nextPage"
          type="primary"
          class="nextOne"
          round
          style="width:165px;font-size:20px"
        >返回</el-button>
      </el-row>
      <!-- 调整考核等级弹出框-->
      <el-dialog title="调整绩效等级" :visible.sync="jixiaoLevel" @close="close()" width="30%" left>
        <el-button
          @click="getHistoryList()"
          style="width: 90px;
height: 20px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #3B95FF;
padding:0%;
color:#3B95FF;
font-size:12px;
position:absolute;
top:4%;
left:30%"
        >查看调整记录</el-button>
        <el-row style="margin-top:-4%">
          <h4>考核名称：{{ jixiaoData.name }}</h4>
          <h4>员工名称：{{ jixiaoData.userName }}</h4>
        </el-row>
        <el-row>
          <div
            style="border:1px solid #EBEEF5;width:100%;background-color: rgba(204, 204, 204, 0.3);height:45px;display:flex;align-items:center;justify-content: space-around;"
          >
            <span style="font-weight:900;color:#000">阶段</span>
            <span style="font-weight:900;color:#000">等级</span>
          </div>
          <div
            style="border:1px solid #EBEEF5;border-top:none;width:100%;height:45px;display:flex;align-items:center;justify-content: space-around;"
          >
            <span>修改前</span>
            <span
              style="color:#E86565 "
            >{{ jixiaoData.grade==1 ? '好': jixiaoData.grade==2? '较好' : jixiaoData.grade==3? "一般" : '差'}}</span>
          </div>
          <div
            style="border:1px solid #EBEEF5;border-top:none;width:100%;height:45px;display:flex;align-items:center;justify-content: space-around;"
          >
            <span style="margin-left:10%">修改后</span>
            <el-select
              style="width:20%;margin-left:13%;text-align:center"
              v-model="ruleForm1.levels"
            >
              <el-option label="好" value="1"></el-option>
              <el-option label="较好" value="2"></el-option>
              <el-option label="一般" value="3"></el-option>
              <el-option label="差" value="4"></el-option>
            </el-select>
          </div>
        </el-row>
        <el-row>
          <h4 style="margin-bottom:8px; opacity: 0.5;">修改记录仅主管与管理员库可见</h4>
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入修改说明"
            style="font-size:12px; "
            maxlength="2000"
            v-model="ruleForm1.contents"
            show-word-limit
          ></el-input>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="JixiaoLevel()" type="primary">确定</el-button>
          <el-button @click="closeJixiaoLevel()">取消</el-button>
        </span>
        <el-dialog
          :append-to-body="true"
          left
          title="调整记录"
          :visible.sync="getHistoryListOpen"
          width="25%"
        >
          <el-table :data="getHistoryData" style="width: 100%">
            <el-table-column prop="content" align="center" label="调整内容"></el-table-column>
            <el-table-column prop="updateTime" align="center" label="时间"></el-table-column>
          </el-table>
          <el-row>
            <span style="display:flex">
              <span style="margin-top:3%;margin-left:70%">
                共{{ total1 }}条
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="total1"
                  style="margin-top:-20%;margin-left:40%"
                ></el-pagination>
              </span>
            </span>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="getHistoryListOpen = false" type="primary">确认</el-button>
          </span>
        </el-dialog>
      </el-dialog>
      <!-- 查看员工周报弹出框-->
      <el-dialog
        :title="titleType+' - 每周工作'"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-card v-for="item in weeklyData" :key="item.id" style="margin-bottom:8px;">
          <div slot="header" style="height:0px;line-height:5px;background:#ccc">
            <span style="display:flex; justify-content: space-between;">
              <span>{{ item.timeName }}</span>
              <span>{{ item.createTime }}</span>
            </span>
          </div>
          <div>{{ item.content }}</div>
        </el-card>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">退出</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- <threeStep v-if="page3" :personInfo1="personInfo"></threeStep> -->
  </div>
</template>
    
//     <script>
// import threeStep from "./threeStep.vue";
import {
  getViewProgress,
  getWeekly,
  putKanBan,
  getUserId,
  getHistoryListOpenList
} from "@/api2/kaohe";
export default {
  //   components: {
  //     threeStep: threeStep
  //   },
  props: ["dataTypes"],
  data() {
    return {
      ruleForm1: {
        level: "",
        levels: "", //调整考核等级
        contents: "" //调整说明
      },
      grades: "",
      grades1: "",
      neiRongList: "",
      getHistoryData: [],
      jixiaoData: [],
      jixiaoLevel: false,
      disableds: true,
      weeklyData: [], //周报数据
      titleType: "",
      level: "", //等级
      centerDialogVisible: false,
      getHistoryListOpen: false,
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes,
      ids: "",
      userIds: "",
      xiuGaiId: "", //修改id
      allBtn: true, //添加维度,删除维度按钮的开关
      addTarget: false, //添加指标弹窗开关
      formLabelWidth: "80px", //label-width
      no_input: true, //限制选项input框禁用字符
      deleteStyle: true, //删除维度按钮显示隐藏
      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      pageSize: 10, //当前页容量
      pageNum1: 1, //当前页
      total1: 0, //总条数
      pageSize1: 10, //当前页容量
      // }
      //表格数据数组
      rowsId: "",
      tableData: [],
      assessTemplateId: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        type: "",
        name: "", //指标名称
        num: "", //填写数量
        //维度
        dynamicItem: [
          {
            key: "1",
            name: ""
          }
        ]
      },
      //规则校验
      rules: {
        //指标名称校验
        name: [
          { required: true, message: "请输入指标名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],

        //填写数量校验
        type: [
          { required: true, message: "请选择填写数量", trigger: "change" }
        ],
        //维度校验
        dynamicItem: {
          name: [
            { required: true, message: "请输入维度", trigger: "blur" },
            {
              min: 1,
              max: 30,
              message: "长度在 1 到 30 个字符",
              trigger: "blur"
            }
          ]
        }
      },

      //新增和编辑弹框标题
      dialogStatus: ""
    };
  },
  created() {
    this.getUserIds();
    // this.getViewProgressd(); //获取指标表格数据
  },
  watch: {
    "this.grades"(valnew, valold) {
      console.log(valnew, valold);
      // let valnew1 = "";
      // let valold1 = "";

      // console.log(valnew1, valold1);
      // if (valnew !== valold) {
      //   this.neiRongList = "【" + valnew1 + "】调整为【" + valold1 + "】";
      //   console.log(this.neiRongList);
      // }
    },
    "tableColumns.list"(newVal) {
      const headerSet = new Set();
      newVal?.forEach(column =>
        Object.keys(column).map(item => item !== "file" && headerSet.add(item))
      );
      this.tableColumns.headers = [...headerSet];
      // console.log(this.tableColumns.headers);
    }
  },

  methods: {
    //查看调整记录
    getHistoryList() {
      this.getHistoryListOpenListd();
      this.getHistoryListOpen = true;
    },
    //切换每页条数容量
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getHistoryListOpenListd(this.pageNum1, this.pageSize1);
    },
    //切换当前页
    handleCurrentChange1(val) {
      this.pageNum1 = val;
      this.getHistoryListOpenListd();
    },
    async getHistoryListOpenListd() {
      console.log(this.neiRongList);
      const params = {
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        isAsc: "desc",
        recordId: this.xiuGaiId
      };
      const res = await getHistoryListOpenList(params);
      console.log(res);
      if (res.code == 0) {
        this.getHistoryData = res.data;
        this.total1 = res.total;
      }
    },

    //获取用户基本信息
    getUserIds() {
      console.log(this.userIds);
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              // this.userIds == res.data.id;
              this.getViewProgressd(res.data.id); //获取表格数据(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
      console.log(this.userIds);
    },
    //推送看板
    changeOne(e) {
      console.log(e);
      const params = {
        assessorId: this.dataTypesTemp.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        queryType: "1",
        grade: e,
        userId: JSON.parse(sessionStorage.getItem("loginUserinfo")).uid
      };
      getViewProgress(params)
        .then(res1 => {
          console.log(res1);
          this.total = res1.total; //总条数
          res1.data.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          ); //这是升序，倒序的话翻过来
          this.userIds = e;
          // this.tableData = res1.data;
          this.tableData = res1.data.map(item => {
            item.processBeans = item.contentDto.processBeans.find(
              v => v.state === 1
            );
            return item;
          });
        })
        .catch(e => {
          console.log(e);
        });
      if (e == 1) {
        this.disableds = false;
      } else {
        this.disableds = true;
      }
    },
    tuiSong(e) {
      console.log(e);
      if (this.ruleForm1.level == 1) {
        this.level = "好";
      } else if (this.ruleForm1.level == 2) {
        this.level = "较好";
      } else if (this.ruleForm1.level == 3) {
        this.level = "一般";
      } else if (this.ruleForm1.level == 4) {
        this.level = "差";
      }
    },
    async handleConfirm() {
      console.log(this.ruleForm1.level);
      const data = {
        id: this.dataTypesTemp.id,
        grade: this.ruleForm1.level,
        type: "2"
      };
      const res = await putKanBan(data);
      if (res.code == 0) {
        this.$message({
          message: "推送成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "推送失败！",
          type: "warning"
        });
      }
    },
    handleCancel() {
      console.log("cancel");
    },

    //查看员工周报
    zhouBao(rows) {
      console.log(rows);
      this.rowsId = rows.userId;
      this.titleType = rows.userName;
      this.weekly(); //点击调用查询周报接口
      this.centerDialogVisible = true;
    },
    // 查询周报接口
    async weekly() {
      const params = { userId: this.rowsId };
      console.log(params);
      const res = await getWeekly(params);
      this.weeklyData = res.data;
      console.log(res);
    },
    nextPage() {
      this.$emit("giveFather", false);
    },
    // 表格内编辑按钮的点击事件
    editRow(rows) {
      this.grades = rows.grade;
      console.log(rows.grade);
      this.jixiaoData = rows;
      this.xiuGaiId = rows.id;
      this.jixiaoLevel = true;
    },
    //确定修改按钮
    async JixiaoLevel() {
      const data = {
        id: this.xiuGaiId,
        grade: this.ruleForm1.levels,
        remarks: this.ruleForm1.contents,
        type: "1",
        userId: this.userIds,
        content: this.neiRongList
      };
      console.log(data);

      const res = await putKanBan(data);
      if (res.data == true) {
        // this.grades1 = data.grade;
        // this.tableData.grade = this.ruleForm1.levels;
        this.$message({
          message: "修改成功",
          type: "success"
        });
        // let valnew1 = "";
        // let valold1 = "";

        // let old = this.grades;
        // let news = this.jixiaoData;
        // if (news == 0) {
        //   valnew1 = "优";
        // } else if (news == 1) {
        //   valnew1 = "好";
        // } else if (news == 2) {
        //   valnew1 = "良";
        // }
        // if (old == 0) {
        //   valold1 = "优";
        // } else if (old == 1) {
        //   valold1 = "好";
        // } else if (old == 2) {
        //   valold1 = "良";
        // }
        // this.neiRongList = "【" + valold1 + "】调整为【" + valnew1 + "】";
        const params = this.userIds;
        this.getViewProgressd(params);
      }
      (this.ruleForm1 = {
        level: "",
        levels: "", //调整考核等级
        contents: "" //调整说明
      }),
        (this.jixiaoLevel = false);
    },
    //取消修改按钮
    closeJixiaoLevel() {
      (this.ruleForm1 = {
        level: "",
        levels: "", //调整考核等级
        contents: "" //调整说明
      }),
        (this.jixiaoLevel = false);
    },
    //右上方×号
    close() {
      this.ruleForm1 = {
        level: "",
        levels: "", //调整考核等级
        contents: "" //调整说明
      };
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getViewProgressd(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      const params = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      this.getViewProgressd(params);
    },
    //获取表格数据
    getViewProgressd(e) {
      //   console.log(this.dataTypesTemp);
      console.log(this.dataTypesTemp);
      const params = {
        assessorId: this.dataTypesTemp.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        queryType: "1",
        userId: e
      };
      getViewProgress(params)
        .then(res1 => {
          console.log(res1);
          this.total = res1.total; //总条数
          res1.data.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          ); //这是升序，倒序的话翻过来
          this.userIds = e;
          // this.tableData = res1.data;
          this.tableData = res1.data.map(item => {
            item.processBeans = item.contentDto.processBeans.find(
              v => v.state === 1
            );
            return item;
          });
        })
        .catch(e => {
          console.log(e);
        });
    }
    //分页逻辑}
  }
};
</script>
    
    <style lang="scss" scoped>
/* 共同样式 */
.add_dimension {
  color: blue;
}

.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;

  background-color: #0096fe;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-card__header {
  background-color: rgba(202, 197, 197, 0.3);
}
// ::v-deep .el-textarea__inner {
//   resize: none;
// }
::v-deep .el-input__icon {
  line-height: 24px;
}
::v-deep .el-dialog__header {
  background-color: rgba(204, 204, 204, 0.3);
}
</style>
    